import React, { Component } from 'react'
import img1 from './imgs/1.png'
import img2 from './imgs/2.png'
import img3 from './imgs/3.png'
import img4 from './imgs/4.png'

let style={
    hotCom:{
        'width':'1200px',
        'height':'430px',
        'border':'#E5E5E5 solid 1px',
        'borderTop':'none',
    },
    showCom:{
        'display':'inline-block',
    },
    imgdiv:{
        'width':'299px',
        'height':'280px',
    },
    comName:{
        'width':'299px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    intro:{
        'width':'299px',
        'textAlign':'center',
        'marginTop':'10px',
    },
    price:{
        'width':'299px',
        'textAlign':'center',
        'marginTop':'20px',
        'color':'red',
    },
}
let arr=[
    {
        img: img1,
        comName: '坚果 R1',
        intro: '次世代旗舰手机，内藏来自未来的“电脑”',
        price: '￥ 4,499.00',
    },
    {
        img: img2,
        comName: '坚果 Por2 特别版',
        intro: '漂亮的不像实力派',
        price: '￥ 1,899.00',
    },
    {
        img: img3,
        comName: '坚果 3',
        intro: '漂亮的不像实力派',
        price: '￥ 1,599.00',
    },
    {
        img: img4,
        comName: '坚果 Pro2',
        intro: '漂亮的不像实力派',
        price: '￥ 2,299.00',
    },
]
class HotCom extends Component {
    constructor(props) {
        super(props)
        this.state = {
            
        }
    }

    render() {
        return <div className="HotCom" style={style.hotCom}>
            {arr.map((com, i) =><div key={i} className='showCom' style={style.showCom}>
                <div className='imgDiv' style={style.imgdiv}>
                    <img src={com.img} alt="..."/>
                </div>
                <div className='comName' style={style.comName}>
                <strong>{com.comName}</strong>
                </div>
                <div className='intro' style={style.intro}>
                    {com.intro}
                </div>
                <div className='price' style={style.price}>
                    <strong>{com.price}</strong>
                </div>
            </div>)}
        </div>
    }
}

export default HotCom;